<template>
  <div>
    <el-card class="order-container">
      <template #header>
        <div class="header">
          <el-input
            style="width: 200px; margin-right: 10px"
            placeholder="请输入订单号"
            size="small"
            v-model="orderNo"
            @change="handleOption"
            clearable
          />
          <el-select
            v-model="orderStatus"
            @change="handleOption"
            size="small"
            style="width: 200px; margin-right: 10px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <!-- <el-button type="primary" size="small" icon="el-icon-edit">修改订单</el-button> -->
          <el-button
            type="primary"
            size="small"
            icon="el-icon-s-home"
            @click="delivery()"
            >配货完成</el-button
          >
          <el-button type="primary" size="small" icon="el-icon-s-home" @click="outbound()"
            >出库</el-button
          >
          <el-button type="danger" size="small" icon="el-icon-delete" @click="close()"
            >关闭订单</el-button
          >
        </div>
      </template>
      <el-table
        ref="multipleTable"
        :data="orderlist"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="orderNo" label="订单号" width="120">
        </el-table-column>
        <el-table-column prop="totalPrice" label="订单总价" width="120">
        </el-table-column>
        <el-table-column
          prop="orderStatus"
          label="订单状态"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{ scope.row.orderStatus }} </template>
        </el-table-column>
        <el-table-column prop="payType" label="支付方式" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-card>
  </div>
</template>


<script>
export default {
  data() {
    return {
      value: "",
      options: [
        {
          value: "",
          label: "全部",
        },
        {
          value: 0,
          label: "待支付",
        },
        {
          value: 1,
          label: "已支付",
        },
        {
          value: 2,
          label: "配货完成",
        },
        {
          value: 3,
          label: "出库成功",
        },
        {
          value: 4,
          label: "交易成功",
        },
        {
          value: -1,
          label: "手动关闭",
        },
        {
          value: -2,
          label: "超时关闭",
        },
        {
          value: -3,
          label: "商家关闭",
        },
      ],
      tableData: [
        {
          date: "2016-05-03",
          name: "6199",
          address: "出库成功",
          img: "16357700043162924",
          goodsid: "微信支付",
        },
        {
          date: "2016-05-03",
          name: "链接",
          address: "200",
          img: "小米",
          goodsid: "1",
        },
        {
          date: "2016-05-03",
          name: "链接",
          address: "200",
          img: "小米",
          goodsid: "1",
        },
      ],
      multipleSelection: [], //选中项
      pagination: 1, //页数
      total: 1, //总页数
      orderlist: [], //订单列表
      orderNo: "", // 订单号
      orderStatus: "", // 订单状态
    };
  },
  created() {
    this.getorderlist();
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    // 获取订单列表
    getorderlist() {
      this.$request
        .get("/orders", {
          params: {
            pageNumber: this.pagination,
            pageSize: 10,
            orderNo: this.orderNo,
            orderStatus: this.orderStatus,
          },
          headers: {
            "X-Requested-With": "XMLHttpRequest",
            token: localStorage.getItem("token") || "",
          },
        })
        .then(({ data }) => {
          // this.loading = false;
          this.total = data.data.totalCount;
          this.orderlist = data.data.list;
          console.log(this.orderlist);
        });
    },
    // 分页器变化
    handleCurrentChange(val) {
      this.pagination = val;
      this.getorderlist();
    },
    // 下拉列表
    handleOption() {
      this.pagination = 1;
      this.getorderlist();
    },
    // 配送
    delivery(id) {
      let params = 0;
      if (id) {
        params = id;
      } else {
        if (!this.multipleSelection.length) {
          this.$message({
            message: "请选择选项",
            type: "warning",
          });
          return;
        }
        params = this.multipleSelection.map((item) => item.orderId);
      }
      this.$request
        .put(
          "/orders/checkDone",
          {
            ids: params,
          },
          {
            headers: {
              "X-Requested-With": "XMLHttpRequest",
              token: localStorage.getItem("token") || "",
              "Content-Type": "application/json",
            },
          }
        )
        .then(({ data }) => {
          data.resultCode == 200
            ? this.$message({
                message: "配货成功",
                type: "success",
              })
            : this.$message({
                message: data.message,
                type: "warning",
              });
          this.getorderlist();
        });
    },
    // 出库
    outbound(id) {
       let params = 0;
      if (id) {
        params = [id];
      } else {
        if (!this.multipleSelection.length) {
          this.$message({
            message: "请选择选项",
            type: "warning",
          });
          return;
        }
        params = this.multipleSelection.map((item) => item.orderId);
      }
      this.$request
        .put(
          "/orders/checkOut",
          {
            ids: params,
          },
          {
            headers: {
              "X-Requested-With": "XMLHttpRequest",
              token: localStorage.getItem("token") || "",
              "Content-Type": "application/json",
            },
          }
        )
        .then(({ data }) => {
          data.resultCode == 200
            ? this.$message({
                message: "出库成功",
                type: "success",
              })
            : this.$message({
                message: data.message,
                type: "warning",
              });
          this.getorderlist();
        });
    },
    // 关闭
    close(id) {
       let params = 0;
      if (id) {
        params = [id];
      } else {
        if (!this.multipleSelection.length) {
          this.$message({
            message: "请选择选项",
            type: "warning",
          });
          return;
        }
        params = this.multipleSelection.map((item) => item.orderId);
      }
      this.$request
        .put(
          "/orders/close",
          {
            ids: params,
          },
          {
            headers: {
              "X-Requested-With": "XMLHttpRequest",
              token: localStorage.getItem("token") || "",
              "Content-Type": "application/json",
            },
          }
        )
        .then(({ data }) => {
          data.resultCode == 200
            ? this.$message({
                message: "关闭成功",
                type: "success",
              })
            : this.$message({
                message: data.message,
                type: "warning",
              });
          this.getorderlist();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-button {
  width: 90px;
  // padding: 10px;
}
.tablist {
  padding: 20px;
}
</style>